<template>
	<div>
		<!-- 学科级联选择器，传递对应的学科id -->
		<!-- 方向没有接口，不用级联选择器用字符串 -->
		<Card>
			<!-- alert提醒框 -->
			<div class="alert" :class="{ modify: isModify }">
				<p>
					<Icon type="md-alert" />
					{{ pageTitle }}试题信息
				</p>
			</div>
			<Row>
				<!-- 分页栏 -->
				<i-Col :span="14" :push="2">
					<i-Form
						ref="questionsForm"
						:model="questionsForm"
						:rules="ruleValidate"
						inline
					>
						<Tabs value="name1" v-model="currentTab">
							<!-- 试题分类 -->
							<TabPane label="试题分类" icon="ios-apps">
								<FormItem prop="subjectID" label="学科：">
									<i-Select v-model="questionsForm.subjectID" style="width:300px">
										<i-Option v-for="item in subList" :value="item.id" :key="item.id">
											{{ item.subjectName }}
										</i-Option>
									</i-Select>
								</FormItem>
								<br />
								<!-- 城市 -->
								<FormItem prop="province" label="城市：">
									<i-Select
										v-model="questionsForm.province"
										style="width:300px"
										@on-change="getArea"
									>
										<i-Option
											v-for="(item, index) in province"
											:value="item"
											:key="index"
										>
											{{ item }}
										</i-Option>
									</i-Select>
								</FormItem>
								<br />
								<!-- 区县 -->
								<FormItem prop="city" label="区县：">
									<i-Select v-model="questionsForm.city" style="width:300px">
										<i-Option v-for="(item, index) in city" :value="item" :key="index">
											{{ item }}
										</i-Option>
									</i-Select>
								</FormItem>
								<br />
								<!-- 试题方向 -->
								<FormItem prop="direction" label="出题方向：">
									<i-Select v-model="questionsForm.direction" style="width:300px">
										<i-Option
											v-for="(item, index) in direction"
											:value="item"
											:key="index"
										>
											{{ item }}
										</i-Option>
									</i-Select>
								</FormItem>
								<br />
								<!-- 试题难度 -->
								<FormItem prop="difficulty" label="试题难度：">
									<RadioGroup v-model="questionsForm.difficulty" type="button">
										<Radio
											:label="item.label"
											v-for="item in difficulty"
											:key="item.value"
										></Radio>
									</RadioGroup>
								</FormItem>
							</TabPane>
							<TabPane label="试题详情" icon="md-clipboard">
								<!-- 试题题型 -->
								<FormItem prop="questionType" label="题型：">
									<RadioGroup v-model="questionsForm.questionType" type="button">
										<Radio
											:label="item.label"
											v-for="(item, index) in questionType"
											:key="index"
										></Radio>
									</RadioGroup>
								</FormItem>
								<br />
								<!-- 题干 -->
								<FormItem prop="question" label="题干：" id="quill">
									<br />
									<quill-editor
										v-model="questionsForm.question"
										ref="questionsQuillEditor"
									></quill-editor>
								</FormItem>
								<br />

								<FormItem prop="options">
									<br />
									<!-- 单选项框 -->
									<template v-if="questionsForm.questionType === '单选'">
										<p>选项 (以下选中的选项为正确答案)</p>
										<RadioGroup v-model="selectValRa" vertical @on-change="raSelect">
											<Radio
												:label="index"
												v-for="(item, index) in raOption"
												:key="index"
												style="margin-bottom:10px;"
											>
												<span>{{ String.fromCharCode(65 + index) }}:</span>
												<Input
													v-model="item.title"
													clearable
													style="width: 300px"
													size="small"
												/>
											</Radio>
										</RadioGroup>
										<!-- + 增加选项与答案 -->
										<Button
											type="success"
											style="width:300px;margin-left:34px;"
											@click="addRadio"
										>
											+ 增加选项与答案
										</Button>
									</template>
									<!-- 复选框 -->
									<template v-else-if="questionsForm.questionType === '多选'">
										<p>选项 (以下选中的选项为正确答案)</p>
										<CheckboxGroup v-model="selectValCh" @on-change="chSelect">
											<Checkbox
												:label="index"
												v-for="(item, index) in chOption"
												:key="index"
												style="margin-bottom:10px;"
											>
												<span>{{ String.fromCharCode(65 + index) }}:</span>
												<Input
													v-model="item.title"
													clearable
													style="width: 300px"
													size="small"
												/>
											</Checkbox>
										</CheckboxGroup>
										<!-- + 增加选项与答案 -->
										<Button
											type="success"
											style="width:300px;margin-left:34px;"
											@click="addCheckbox"
										>
											+ 增加选项与答案
										</Button>
									</template>
								</FormItem>
							</TabPane>
							<TabPane label="试题解析" icon="md-copy">
								<!-- 答案解析 -->
								<FormItem prop="answer" label="答案解析：" id="quill">
									<br />
									<quill-editor
										v-model="questionsForm.answer"
										ref="answerQuillEditor"
									></quill-editor>
								</FormItem>
								<!-- 题目备注 -->
								<FormItem prop="remarks" label="题目备注" id="quill">
									<br />
									<quill-editor
										v-model="questionsForm.remarks"
										ref="remarksQuillEditor"
									></quill-editor>
								</FormItem>
								<Button type="primary" style="float: right;" @click="addQuestion">
									{{ pageTitle }}试题
								</Button>
							</TabPane>
							<TabPane disabled>
								<div class="edit-success">
									<br />
									<Icon style="font-size:44px" type="md-checkmark" />
									<br />
									已完成
								</div>
							</TabPane>
						</Tabs>
					</i-Form>
				</i-Col>
				<!-- 步骤条 -->
				<i-Col :span="4" :push="4">
					<Steps :current="currentTab" direction="vertical" id="step">
						<Step title="试题分类" icon="ios-apps"></Step>
						<Step title="试题详情" icon="md-clipboard"></Step>
						<Step title="试题解析" icon="md-copy"></Step>
						<Step title="已完成" icon="md-checkmark"></Step>
					</Steps>
				</i-Col>
			</Row>
		</Card>
	</div>
</template>
<script>
import { provinces, citys } from './citys'
import { direction, questionType, difficulty } from './constants'
import { mapState, mapMutations } from 'vuex'

export default {
	name: 'QuestionsAdd',
	data() {
		return {
			id: '',
			// 当前标签页
			currentTab: 0,
			// 添加试题的表格
			enterpriseID: 1,
			questionsForm: {
				id: '',
				subjectID: '',
				province: '',
				city: '',
				enterpriseID: 1,
				catalogID: 1,
				direction: '',
				question: '',
				options: [],
				difficulty: '简单',
				questionType: '单选',
				answer: '',
				remarks: '',
				videoURL: 'www.baidu.com',
				tags: '不需要标签'
			},
			// 试题表单的规则
			questionsRule: {},
			// 学科列表
			subList: [],
			// 省份列表
			province: [],
			// 对应城市列表
			city: [],
			// 试题方向
			direction,
			// 试题难度
			difficulty,
			// 题型
			questionType,
			// 单选题的数据
			raOption: [
				{ title: '', isRight: true, code: 'vue' },
				{ title: '', isRight: false, code: 'vue' },
				{ title: '', isRight: false, code: 'vue' },
				{ title: '', isRight: false, code: 'vue' }
			],
			// 多选框的数据
			chOption: [
				{ title: '', isRight: true, code: 'vue' },
				{ title: '', isRight: false, code: 'vue' },
				{ title: '', isRight: false, code: 'vue' },
				{ title: '', isRight: false, code: 'vue' }
			],
			// 单选选项选中值
			selectValRa: 0,
			// 多选选项选中值
			selectValCh: [0],
			// 规则验证
			ruleValidate: {
				subjectID: [
					{
						required: true,
						type: 'number',
						message: '请选择学科',
						trigger: 'change'
					}
				],
				province: [{ required: true, message: '请选择城市', trigger: 'change' }],
				city: [{ required: true, message: '请选择县城', trigger: 'change' }],
				direction: [
					{ required: true, message: '请选择出题方向', trigger: 'change' }
				],
				question: [{ required: true, message: ' ', trigger: 'blur' }],
				difficulty: [
					{ required: true, message: '请选择试题难度', trigger: 'change' }
				],
				questionType: [
					{ required: true, message: '请选择题型', trigger: 'change' }
				],
				answer: [{ required: true, message: ' ', trigger: 'blur' }],
				remarks: [{ required: true, message: ' ', trigger: 'change' }]
			},
			// 当前页面提示栏
			pageTitle: '',
			// 提示栏背景色
			modify: 'modify',
			isModify: false
		}
	},
	computed: {
		...mapState(['notification', 'questionId'])
	},
	methods: {
		...mapMutations(['questionID']),
		// 选择省份后，获取对应城市
		getArea(value) {
			this.city = citys(value)
		},
		// 单选框选中事件
		raSelect() {
			// 先清空所有
			this.raOption.forEach(val => (val.isRight = false))
			this.raOption[this.selectValRa].isRight = true
			console.log(this.raOption)
		},
		// 多选框事件
		chSelect() {
			// 先清空所有
			this.chOption.forEach(val => (val.isRight = false))
			this.selectValCh.forEach(val => {
				this.chOption[val].isRight = true
			})
			console.log(this.chOption)
		},
		// 添加单选选项
		addRadio() {
			this.raOption.push({ title: '', isRight: false, code: 'vue' })
		},
		// 添加多选选项
		addCheckbox() {
			this.chOption.push({ title: '', isRight: false, code: 'vue' })
		},
		// 添加试题
		addQuestion() {
			// 提交的时候再决定options的值
			if (this.questionsForm.questionType === '单选') {
				this.questionsForm.options = this.raOption
			} else if (this.questionsForm.questionType === '多选') {
				this.questionsForm.options = this.chOption
			} else {
				this.questionsForm.options = []
			}
			// console.log(this.questionsForm)
			this.$refs.questionsForm.validate(async valid => {
				console.log(valid)
				if (!valid) {
					this.$Message.warning({
						content: '带*都为必填项，请补全',
						duration: 10,
						closable: true
					})
					return
				}
				this.currentTab = 3
				if (this.questionId) {
					// console.log(this.questionsForm)
					const res = await this.$http.putQuestions(this.questionsForm)
				} else {
					const res = await this.$http.addQuestions(this.questionsForm)
				}
				this.questionID('')
				this.$refs.questionsForm.resetFields()
				// 跳转
				setTimeout(() => {
					this.$router.push('/questions')
					this.currentTab = 0
				}, 2000)
			})
		},
		// 初始化表单
		initForm() {
			this.pageTitle = '添加'
			this.isModify = false
		}
	},
	async created() {
		// 获取学科简单列表
		const res = await this.$http.simpleSub()
		this.subList = res
		// 省份列表
		this.province = provinces()
		this.initForm()
	},
	watch: {
		async id(id) {
			if (id) {
				// 通过改变页面提示框来提醒用户所在页面
				const { data: res } = await this.$http.getQuestionDetails(id)
				this.currentTab = 0
				// 多选和复选框绑定的都是单独列出来的对象，只有在提交的时候才会赋值给要提交的那个总对象
				// 所以拿到修改参数的时候，也是先赋值给单独列出来的那个对象。
				Object.keys(this.questionsForm).forEach(val => {
					// 判断是否有这个属性
					if (res.hasOwnProperty(val) && val !== 'options') {
						this.questionsForm[val] = res[val]
					}
				})
				this.pageTitle = '修改'
				this.isModify = true
				if (res.questionType === '单选') {
					this.raOption = res.options
				} else if (res.questionType === '多选') {
					this.chOption = res.options
				}
				// 区县有bug，城市的选择框赋值了，但是没变化，手动调用
				this.getArea(this.questionsForm.province)
			} else {
				this.initForm()
				// 表单一定要重置
				this.$refs.questionsForm.resetFields()
			}
		}
	},
	// keep-alive的钩子函数，组件被切换进的钩子
	async activated() {
		this.currentTab = this.currentTab === 3 ? 0 : this.currentTab
		this.id = this.questionId
		// 查看url是否传递参数，判断修改还是添加试题
		// console.log(this.id)
	}
}
</script>
<style lang="less" scoped>
.alert {
	background-color: #f4f4f5;
	text-align: center;
	border-radius: 5px;
	width: 100%;
	line-height: 40px;
	color: #909399;
	margin-bottom: 20px;
	.ivu-icon-md-alert {
		font-size: 16px;
		vertical-align: text-top;
	}
}
.ivu-steps {
	padding-top: 40px;
	height: 300px;
}
.ivu-steps {
	.ivu-steps-item {
		height: 80px;
	}
}
#quill {
	height: 260px;
	.quill-editor {
		height: 120px;
	}
}
.modify {
	background-color: #fa7e23;
	color: #f4f4f5;
}
.edit-success {
	height: 200px;
	line-height: 50px;
	width: 200px;
	text-align: center;
	background-color: #68b88e;
	color: #fff;
	font-size: 22px;
	border-radius: 50%;
	margin: 100px auto 0;
}
</style>
